/**
 * Ext JS 4 TinyMCE form field widget
 * Built on ExtJS 4.2a and TinyMCE 3.2.x
 *
 * @author   Fady Khalife
 * @site     www.fkportfolio.com
 * @licence  www.gnu.org/licenses/lgpl.html
 */

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ux');

Ext.require([
    'Ext.form.*',
    'Ext.window.*',
    'Ext.ux.form.TinyMCE'
]);

Ext.onReady(function() {
    var defaultExampleWin,
        defaultExampleBtn = Ext.get('default-example-btn');

    defaultExampleBtn.on('click', function() {
        if (!defaultExampleWin)
            defaultExampleWin = getDefaultExample();
        
        defaultExampleWin.show();
    });
});

function getDefaultExample() {
    return Ext.create('Ext.window.Window', {
        title: 'Default Init Example',
        closable: true,
        maximizable: true,
        closeAction: 'hide',
        width: 750,
        height: 450,
        layout: 'fit',
        items: [{
            xtype: 'form',
            url: 'submit.php',
            autoScroll: true,
            bodyStyle: 'padding: 10px',
            border: false,
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 60
            },
            defaults: {
                anchor: '100%'
            },
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Title',
                    name: 'title'
                },
                {
                    xtype: 'tinymcefield',
                    fieldLabel: 'Content',
                    name: 'content',
                    value: Ext.example.bogusMarkup
                },
                {
                    xtype: 'textarea',
                    fieldLabel: 'Summary',
                    name: 'summary'
                }
            ],
            dockedItems: [{
                xtype: 'toolbar',
                pack: 'center',
                dock: 'bottom',
                ui: 'footer',
                margin: 5,
                defaults: {
                    minWidth: 80
                },
                items: [
                    {
                        text: 'Toggle Editor',
                        handler: function() {
                            var editor = this.up('form').getForm().findField('content');
                            editor.toggleEditor();
                        }
                    }
                    ,'->',
                    {
                        text: 'Submit',
                        handler: function() {
                            var form = this.up('form').getForm();
                            if (form.isValid()) {
                                form.submit({
                                    success: function(form, action) {
                                        showResult(action.result.data);
                                    }
                                });
                            }
                        }
                    },
                    {
                        text: 'Clear',
                        handler: function() {
                            var form = this.up('form').getForm();
                            form.reset();
                        }
                    }
                ]
            }]
        }]
    });
}

function showResult(resultData) {
    Ext.create('Ext.window.Window', {
        title: 'Result',
        autoScroll: true,
        html: resultData,
        bodyStyle: 'padding: 10px;',
        width: 550,
        height: 400,
        modal: true
   }).show();
}